<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Raspiberry Video Index</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style_video.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome-4.7.0/css/font-awesome.min.css') }}">

    <link rel="stylesheet" href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>

</head>



<body>
    <div>

        <div class="bg bg-blur"></div>
        <div class="content content-front">
        <div id="datetime">
        </div>
        <img src="http://192.168.137.136:8080/?action=stream" />
            <!-- <h1>Hello , this is the Page after login!</h1> -->
            <div id="tempture"> tempture: {{ tempture }} </div>
            <div id="humidity"> humidity: {{ humidity }} </div>
            <div id="time"> time: {{ now }}</div>
            <!-- <span>圆形</span> -->
            <center>
                <div class="switch round">
                    <input id="mySwitch3" type="checkbox">
                    <label id="submit_btn" for="mySwitch3"></label> LED switch
                </div>
                <form action="/api/ai" method="GET">
                    <button type="button" id="baiduai" onclick="javascrtpt:window.location.href='http://192.168.137.136:5000/api/ai' ">distinguish JSON Data</button>
                </form>
                <div>
                    <form action="/api/data">
                        <button type="button" id="updatabtn">Upload JSON Data</button>
                    </form>
                    
                </div>
            </center>
            <!-- <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1351351466&auto=0&height=66"></iframe> -->
            <!-- <iframe style="position: absolute;bottom: -30%;left: -1%;" frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=190
                src="//music.163.com/outchain/player?type=2&id=1351351466&auto=0&height=66"></iframe> -->
        </div>


    </div>


    </div>

    <!-- 初始化 Foundation JS -->
    <script>
    setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
        $(document).ready(function () {
            $(document).foundation();
        })


        $(function () {
            // body...
            $("#mySwitch3").click(function () {
                alert("已打开或关闭LED！");

                // $.ajax({
                //     url: "api/data",
                //     type: "GET",
                //     dataType: "json",
                //     success: function (data) {
                //         // alert(data.name + ":" + data.age);
                //         // $("#NAME2").val(data.name);
                //         // $("#AGE2").val(data.age);
                //         // console.log(data)
                //         alert("已打开或关闭LED！");
                //     }

                // })
            })
        })

        $(function () {
            // body...
            $("#updatabtn").click(function () {
                // alert("获取数据！");

                $.ajax({
                    url: "api/data",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        var tempture = data["tempture"];
                        var humidity = data["humidity"];
                        var time = data["time"];
                        var str = tempture + "   " + humidity + "\rTime: " + time;
                        document.getElementById("tempture").innerHTML = "tempture: " +
                            tempture;
                        document.getElementById("humidity").innerHTML = "humidity: " +
                            humidity;
                        document.getElementById("time").innerHTML = "time: " + time;

                        alert(str);
                        // $("#NAME2").val(data.name);
                        // $("#AGE2").val(data.age);
                        console.log(data)
                        // alert("已打开或关闭LED！");
                    }

                })
            })
        })
    </script>
</body>

</html>
